<!DOCTYPE html>
<html >

<head>
    <title>KDT</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="/kdt.js"></script>
    <script src="/vue.js"></script>
    <script type="text/javascript">
    function initData() {
        window.app.Sid = getCookie('KDT-User-Sid')
        var xhr = new XMLHttpRequest()
        xhr.onload = function(e) {
            if (this.status = 200 || this.status == 304) {
                var o = JSON.parse(xhr.responseText)
                if (o.State = 'OK') {
                    window.app.Packs = o.Ps
                } else {
                    alert(o.Info)
                }
            }
        }
        xhr.open('POST', '/apis/pack/user/query', true)
        var o = new Object()
        o.State = window.app.Sid
        o.Info = 'all'
        xhr.send(JSON.stringify(o))
    }
    setTimeout('initData()', 50)
    </script>
    <style type="text/css">
    .floatCard {
        position: fixed;
        width: 100%;
        align-items: center;
        margin: 20px;
        box-shadow: 5px 5px 5px #ccc;
        max-width: 500px;
        display: none;
        flex-direction: column;
    }
    </style>
</head>

<body style="padding: 0px;margin: 0px; display: flex;flex-direction: column;align-items: center;">
    <div id="main_container" style="display: flex;flex-direction: column;align-items: center;max-width: 500px;width: 100%;">
        <h2>我的订单</h2>
        <div v-for='(p,pindex) in Packs' style="box-shadow: 1px 1px 1px #aaa;padding: 5px;margin: 3px;width: 100%;">
            <div v-on:click='showInfo(p,pindex)' style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;cursor: pointer;">
                <img v-bind:src='getCover(pindex)' style="height: 100px;">
                <div style="display: flex;flex-direction: column;justify-content: space-around;">
                    <b>{{p.Title}}</b>
                    <span style="color: green" v-if='p.PackState'>已收货</span>
                    <span style="color: green" v-else-if='p.DeliveryDots.length>0'>{{p.DeliveryDots[p.DeliveryDots.length-1].Title}}</span>
                </div>
            </div>
        </div>
    </div>
    <div id="info" style="position: fixed;width: 100%;height: 50%;background-color: #fff;display: none;flex-direction: column;align-items: center;justify-content: space-around;">
        <div style="box-shadow: 3px 3px 3px #aaa;border:1px #333 solid; border-radius: 25px;display: flex;flex-direction: column;align-items: center;max-width: 500px;width: 100%;">
            <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around;">
                <img v-bind:src='getCover()' style="height: 100px;">
                <b>{{Title}}</b>
            </div>
            <div v-if='PackState' style="color: green">已收货</div>
            <div v-else style="color: #FF6D00">未收货</div>
            <div v-if='Admin!=""'>配送员:{{Admin}}</div>
            <div v-for='(d,dindex) in DeliveryDots' style="color: green;">
                {{formatTime(d.Time)}} {{d.Title}}
            </div>
            <div style="width: 60%;padding: 5px;display: flex;flex-direction: row;align-items: center;justify-content: space-around;">
                <input v-if='!PackState' type="button" value="确认收货" style="width: 50%;background-color:#FF6D00;  color: #555;padding: 5px;" v-on:click='ReceivePack()'>
                <input type="button" value="关闭" style="width: 50%;color: #555;padding: 5px;" onclick="document.getElementById('info').style.display='none'">
            </div>
        </div>
    </div>
    <script type="text/javascript">
    window.app = new Vue({
        el: '#main_container',
        data: {
            Packs: [],
            Sid: '',
            getCover: function(pindex) {
                return '/res/' + (pindex % 8 + 1).toString() + '.jpg'
            },
            showInfo: function(p, pindex) {
                window.info.PIndex = pindex
                window.info.DeliveryDots = p.DeliveryDots
                window.info.Title=p.Title
                window.info.PackState=p.PackState
                window.info.Admin=p.Admin
                window.info.Num=p.Num
                window.info.ProductId=p.ProductId
                window.info.PackId=p.PackId
                window.info.Owner=p.Owner
                if (p.DeliveryDots.length==0) {
                	var o=new Object()
                	o.Title='No delivery infomation yet'
                    o.Time='T.'
                	window.info.DeliveryDots[0]=o
                }
                document.getElementById('info').style.display = 'flex'
            }
        }
    })
    window.info = new Vue({
        el: "#info",
        data: {
            PIndex: 0,
            Title: '',
            PackState:false,
            Admin:'',
            Num:0,
            ProductId:'',
            PackId:'',
            Owner:'',
            getCover: function() {
                return '/res/' + (this.PIndex % 8 + 1).toString() + '.jpg'
            },
            formatTime:function(t) {
                var day=t.split('T')[0]
                var ti=t.split('T')[1].split('.')[0]
                return day+' '+ti
            },
            ReceivePack:function() {
                var xhr=new XMLHttpRequest()
                xhr.onload=function(e) {
                    if (this.status==200||this.status==304) {
                        var o=JSON.parse(xhr.responseText)
                        if (o.State="OK") {
                            location.href='/userPage.html'
                        }else {
                            alert(o.Info)
                        }
                    }
                }
                var o=new Object()
                o.State=window.app.Sid
                o.Info=window.info.PackId
                xhr.open('POST', '/apis/pack/user/receive', true)
                xhr.send(JSON.stringify(o))
            },
            DeliveryDots: []
        }
    })
    </script>
</body>

</html>